<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
           // 1、给一级菜单li设置鼠标移入事件，二级菜单显示
           $('header>div>li').mouseover(function (){
               // console.log(this);//谁触发鼠标移入事件，那么这个this就是谁，this还是一个dom对象
              // $(this).children('ul').css('diplay','block');//显示就是改变diplay属性为block
               $(this).children('ul').show();//show()方法本质上还是更新display属性为block
               console.log($('li').css('height'));
           });
            $('header>div>li').mouseout(function (){
                $(this).children('ul').hide();//hide()方法本质上还是更新display属性为none
                console.log($('li').css('height'));
            });
        });

        //mouseover 事件在鼠标移动到选取的元素及其子元素上时触发
        //mouseenter 事件只在鼠标移动到选取的元素上时触发
        //以后如果有鼠标移入事件，请使用mouseenter，而不是mouseover
        //鼠标离开事件使用mouseleave，不使用mouseout
    </script>
</head>
<body>
<header>
    <div>
        <li class="">
            <a href="javascript:;">菜单1</a>
            <ul >
                <li>菜鸡1</li>
                <li>菜鸡2</li>
                <li>菜鸡3</li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">菜单2</a>
            <ul>
                <li>菜鸡1</li>
                <li>菜鸡2</li>
                <li>菜鸡3</li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">菜单3</a>
            <ul>
                <li>菜鸡1</li>
                <li>菜鸡2</li>
                <li>菜鸡3</li>
            </ul>
        </li>
    </div>
</header>
</body>
</html>